<template>
  <kk-relative class="Page W" color="dark" :load="Load">
    <kk-text class="T1" val="Relative 容器" />
    <div class="F2" />
    <kk-text class="T2" val="自带相对定位和加载遮罩层的容器，内部为绝对定位" />
    <div class="F2" />
    <div class="Shows">
      <div class="Polk">
        <kk-relative class="Relative" load></kk-relative>
        <div class="F2" />
        <kk-relative class="Relative" color="dark" load></kk-relative>
      </div>
      <div class="Codea">
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-relative" />
        <kk-text class="Blue Space" val="load=" />
        <kk-text class="Orange">"true"</kk-text>
        <kk-text class="Black" val="&gt;&lt;/" />
        <kk-text class="Blues" val="kk-relative" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-relative" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Orange">"dark"</kk-text>
        <kk-text class="Blue Space" val="load" />
        <kk-text class="Black" val="&gt;&lt;/" />
        <kk-text class="Blues" val="kk-relative" />
        <kk-text class="Black" val="&gt;" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="效果演示" />
    <div class="F2" />
    <kk-text class="T2" val="点击下面的按钮将此页面说明部分进入加载状态" />
    <div class="F2" />
    <kk-button class="Button" :val="`打开加载效果 ${Time} 秒`" @click="OpenLoad()" thick />

    <div class="F1" />

    <kk-text class="T1" val="行内样式" />
    <div class="F2" />
    <kk-text class="T2" val="组件自带一部分行内样式，请注意样式冲突" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Blues" val="box-sizing:" />
        <kk-text class="Orange Space" val="border-box" />
        <div class="F2" />
        <kk-text class="Blues" val="position:" />
        <kk-text class="Orange Space" val="relative" />
        <div class="F2" />
        <kk-text class="Blues" val="font-size:" />
        <kk-text class="Greens Space" val="0vw" />
      </div>
    </div>
  </kk-relative>
</template>

<script>
export default {
  // 页面对象
  data: () => ({
    Interval: null,
    Load: false,
    Time: 3
  }),

  // 页面方法
  methods: {
    OpenLoad() {
      window.localStorage.setItem("kk-load", true);
      this.Load = true;
      const that = this;
      this.Interval = setInterval(function() {
        if (that.Time > 0) {
          that.Time--;
        } else {
          that.Time = 3;
          that.Load = false;
          clearInterval(that.Interval);
          window.localStorage.removeItem("kk-load");
        }
      }, 1000);
    }
  }
};
</script>

<style scoped>
.Relative {
  border: 0.05vw solid rgb(220, 223, 230);
  height: 10vw;
  width: 100%;
}
</style>